<template>
  <el-table-column
    :key="code"
    :label="name"
    :min-width="200"
    :fixed="false"
    align="center"
  >
    <template
      #default="scope"
    >
      <!-- 编辑模式 -->
      <table-popup-dtable-item
        v-show="edit"
        :ref="'input_' + scope.$index + '_' + 'code'"
        v-model="scope.row[code]"
        :line="scope.$index"
        :code="code"
        :name="name"
        :default-value="defaultValue"
        :require="getRequire"
        :url="findUrl"
        :filed-list="filedList"
        :search-key="searchKey"
        :searcher="searcher"
        :filter="filter"
        :page-sign="pageSign"
        :rules="rules"
        @onFieldChange="onFieldChange"
        @onPopupClick="onPopupClick"
      />
      <!-- 显示模式   -->
      <span
        v-show="!edit"
      >
        {{ filter(scope.row[code]) }}
      </span>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'IkColumnText',
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'input'
  },
  props: {
    // 获取数据的地址
    url: {
      type: String,
      default: ''
    },
    // 显示的字段列表
    filedList: {
      type: Array,
      default: function() {
        return [
          { code: 'id', name: 'ID' },
          { code: 'code', name: '编码' },
          { code: 'name', name: '名称' }
        ]
      }
    },
    // 查询键
    searchKey: {
      type: String,
      default: 'name'
    },
    // 查询键
    searcher: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 是否分页
    pageSign: {
      type: Boolean,
      default: true
    },
    // ===== 以下为组件信息 =====
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return []
      }
    },
    filter: {
      type: Function,
      default: function(val) {
        return val
      }
    }
  },
  data() {
    return {
      errorSign: [],
      message: []
    }
  },
  computed: {
    getRequire() {
      return this.require
    },
    findUrl() {
      return `${this.url}/find/findPagination`
    }
  },
  methods: {
    onFieldChange(line, code, oldValue, value, errorSign, message) {
      this.$set(this.errorSign, line, errorSign)
      this.$set(this.message, line, message)
      this.$emit('onFieldChange', line, code, oldValue, value, errorSign, message)
    },
    onPopupClick(line, code, row) {
      this.$emit('onPopupClick', line, code, row)
    }
  }
}
</script>
<style scoped>
::v-deep.require > .el-input__inner {
  border: red 1px solid;
}
</style>
<style lang="scss">
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}

.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
